
import { RouterLink, RouterView } from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

<template>
  <div>
    <el-container>
      
      <el-container >
        <el-aside width="250px">
          <!-- yhl: 在el-emnu中加入 style="height: 100vh" 即可实现导航条下拉到头 -->
          <!-- yhl: el-menu支持直接标记router标签并且每个item后缀index即可 -->
          <el-menu
            router
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            style="height: 100vh"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item disbaled><h2 style="text-align: center; width : 100vh; color: #C8C9CC" >胶片打印机</h2></el-menu-item>
            <el-menu-item index="/" default-active="true">系统状态</el-menu-item>


            <el-sub-menu index="2">
              <template #title>
                <!-- <el-icon><location /></el-icon> -->
                <span>参数设置</span>
              </template>
                <el-menu-item index="/secondary-parameter/print">图像效果</el-menu-item>
                <el-menu-item index="/parameter/communication">通讯参数</el-menu-item>
                <el-menu-item index="/parameter/device-config">设备配置</el-menu-item>
                <el-menu-item index="/parameter/eeprom">EEPROM</el-menu-item>
                <el-menu-item index="/parameter/dicom">dicom</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3">
              <template #title>
                <span>信息查询</span>
              </template>
                <!-- <el-menu-item index="1-1">打印历史</el-menu-item> -->
            </el-sub-menu>

            <el-menu-item index="/systool">系统工具</el-menu-item>



          </el-menu>

        </el-aside>

        <el-container>
          <el-header></el-header>
          <el-main>
            <!-- yhl: 不同路由使用相同的vue时, 需要再这里加入key, 表示变化后刷新 -->
            <RouterView :key="$route.path"></RouterView>
          </el-main>
          <!-- <el-footer>Footer</el-footer> -->
        </el-container>
      </el-container>
    </el-container>
  </div>
  


</template>

<script lang="ts" setup>

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
.router-link-active {
  text-decoration: none;
  color: yellow;
}
a{
  text-decoration: none;
  color: white;
}
</style>

